<template>
  <el-menu
    :default-active="defaultActive"
    class="smenuWrap scrollStyle"
    background-color="#001529"
    text-color="#fff"
    :router="true">
    <el-submenu :index="father.meta.sceneNo" v-for="(father, index) in menu" :key='index'>
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{ father.meta.title }}</span>
      </template>
      <div v-for="(child, childIndex) in father.children" :key='childIndex'>
        <el-submenu :index="child.path" v-if='child.children'>
          <template slot="title">{{ child.meta.title }}</template>
          <el-menu-item :index="`${father.path}/${child.path}/${grandson.path}`" v-for="(grandson, grandsonIndex) in child.children" :key='grandsonIndex'>{{ grandson.meta.title }}</el-menu-item>
        </el-submenu>
        <el-menu-item :index="`${father.path}/${child.path}`" v-else>
          <i :class="child.meta.icon"></i>
          {{ child.meta.title }}
        </el-menu-item>
      </div>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: 'leftMenu',
  props: {
    menu: {
      type: Array,
      required: true
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      defaultActive: ''
    }
  },
  watch: {
    '$route': {
      immediate: true,
      deep: true,
      handler () {
        this.changesMenu()
      }
    }
  },
  created () {
    console.log(this.menu)
    this.defaultActive = this.$route.fullPath
  },
  methods: {
    getIsMenu (arr, list) {
      let newPath = arr[0]
      let isMenu = false
      if (!newPath) return isMenu
      list.forEach(element => {
        let path = element.path.replace('/', '')
        if (newPath === path) {
          if (element.children && element.children.length > 0) {
            arr.shift()
            isMenu = this.getIsMenu(arr, element.children)
          } else {
            isMenu = true
          }
        }
      })
      return isMenu
    },
    changesMenu () {
      // 判断当前路由在菜单中是否存在 防止部分页面存在二级页面不在菜单中
      let arr = this.$route.fullPath.split('/').filter(item => item)
      let isMenu = this.getIsMenu(arr, this.menu)
      if (isMenu) {
        this.defaultActive = this.$route.fullPath
      }
      this.$store.dispatch('getBtnPermission', this.$route)
    }
  }
}
</script>

<style lang='scss' scoped>
.scrollStyle {
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    width: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
    background-color: #a6a5a5;
    border-radius: 4px;
  }
}
.smenuWrap{
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
}
/deep/ .el-menu {
  border-right: none;
}
</style>
